<template>
    <canvas id="rendArea" @mousemove="move" @mousedown="startChoose" @mouseup="endChoose"></canvas>
</template>
<script setup>
import { onMounted } from 'vue';
let isStart = false;
let stopFlag = false;
let startPo = {x:0,y:0};
let endPo = {x:0,y:0};
function move(e) {
    console.log(e)
    if(stopFlag) {
        return;
    }
    var x = e.clientX;
    var y = e.clientY;
    var cav = document.getElementById('rendArea');
    cav.height = window.innerHeight;
    cav.width = window.innerWidth;
    var ctx = cav.getContext('2d');
    ctx.strokeStyle = 'red'
    ctx.moveTo(0,y);
    ctx.lineTo(window.innerWidth,y);
    ctx.stroke();
    ctx.moveTo(x,0);
    ctx.lineTo(x,window.innerHeight);
    ctx.stroke();
    if(isStart) {
        ctx.strokeStyle = 'red'
        ctx.strokeRect(startPo.x,startPo.y,x - startPo.x,y - startPo.y);
        ctx.stroke();
        endPo.x = e.clientX;
        endPo.y = e.clientY;
    }
}
function startChoose(e) {
    isStart = true;
    startPo.x = e.clientX;
    startPo.y = e.clientY;
}
function endChoose(){
    var curWin = window.require('electron').remote.getCurrentWindow();
    if(!stopFlag) {
        isStart = false;
        stopFlag = true;
        var cav = document.getElementById('rendArea');
        cav.height = window.innerHeight;
        cav.width = window.innerWidth;
        var ctx = cav.getContext('2d');
        ctx.strokeStyle = 'red'
        ctx.strokeRect(startPo.x,startPo.y,endPo.x - startPo.x,endPo.y - startPo.y);
        curWin.setIgnoreMouseEvents(true);
    }
}
onMounted(()=> {
    var cav = document.getElementById('rendArea');
    cav.height = window.innerHeight;
    cav.width = window.innerWidth;
})
</script>
<style>
    #rendArea{
        
    }
</style>